<template>
  <Layout>
      <el-card
        shadow="never"
        style="min-height: 400px;margin-bottom: 20px;padding: 0px 0px 20px 0px"
      >
        <el-tabs v-model="activeTab" type="card" @tab-click="onSelect">
         
           <!-- <el-tab-pane label="粉丝 " name="followers" style="padding: 5px"> -->
              <div>
                <el-row style="min-height: 200px; ">
                  <el-col
                    :span="8"
                    v-for="(item,index) in content"
                    :key="'followers'+index"
                    style="padding: 10px"
                  >
                    <el-card
                      shadow="hover"
                      style="font-size: 13px;color: #606266;line-height: 20px"
                    >
                      <i class="el-icon-star-off"></i>&emsp;
                      <a
                        style=" text-decoration:none;cursor:pointer"
                      >{{item.node.name}}</a>
                      <br />
                      <i class="el-icon-message"></i>&emsp;
                      <a
                        :href="item.node.htmlUrl"
                        target="_blank"
                        style=" text-decoration:none;cursor:pointer"
                      >TA的主页</a>
                      <br />
                      <img
                        :src="item.node.avatarUrl"
                        style="width: 100%;border-radius:5px;margin-top: 5px"
                      />
                    </el-card>
                  </el-col>
                </el-row>
                <div style="text-align: center;margin-top: 10px">
               <Pager :info="$page.allSocial.pageInfo"/>
                </div>
              </div> 
              <!-- aaa -->
          <!-- </el-tab-pane>  -->

          <!-- <el-tab-pane :label="'关注 '" name="following" style="padding: 5px">
              <div>
                <el-row style="min-height: 200px; ">
                  <el-col
                    :span="8"
                    v-for="(item,index) in []"
                    :key="'following'+index"
                    style="padding: 10px"
                  >
                    <el-card
                      shadow="hover"
                      style="font-size: 13px;color: #606266;line-height: 20px"
                    >
                      <i class="el-icon-star-off"></i>&emsp;
                      <a
                        style=" text-decoration:none;cursor:pointer"
                      >{{item.node.name}}</a>
                      <br />
                      <i class="el-icon-message"></i>&emsp;
                      <a
                        :href="item.node.htmlUrl"
                        target="_blank"
                        style=" text-decoration:none;cursor:pointer"
                      >TA的主页</a>
                      <br />
                      <img
                        :src="item.node.avatarUrl"
                        style="width: 100%;border-radius:5px;margin-top: 5px"
                      />
                    </el-card>
                  </el-col>
                </el-row>
                <div style="text-align: center;margin-top: 10px">
                </div>
              </div>
          </el-tab-pane> -->
        </el-tabs>
      </el-card>
  </Layout>
</template>

<page-query>
query($page: Int) {
  allSocial (perPage: 2, page: $page) @paginate {
  pageInfo {
    totalPages
    currentPage
  }
   edges {
    node {
      name
      avatarUrl
    }
  }
  }
}
</page-query>


<script>
import { Pager } from 'gridsome'

export default {
  components: {
    Pager
  },
  name: "social",
  data() {
    return {
      followersTotal:'',
      followingTotal:'',
      activeTab: "followers",
      followers: {
        query: {
          page: 1,
          pageSize: 9,
          pageNumber: 1,
        },
        loading: false,
        list: [],
      },
      following: {
        query: {
          page: 1,
          pageSize: 9,
          pageNumber: 1,
        },
        loading: false,
        list: [],
      },
    };
  },
  computed :{
    content(){
      return  this.$page.allSocial.edges 
    }
  },
  methods: {
            onSelect() {
               
            },
            listFollowers() {
           
            },
            listFollowing() {
              
            },


        }
};
</script>
<style lang='scss' scoped>
</style>
